<template>
  <div>
    <a-card>


      <!-- 添加按钮 -->
      <div style="display: flex;justify-content: flex-end;padding-bottom: 20px;">
        <a-button @click="showDrawer" type="primary" :icon="h(PlusOutlined)">添加集合</a-button>
      </div>
      <!-- 添加按钮 -->
      <!-- 表格 -->
      <a-table :columns="columns" :data-source="data" :pagination="pagination">
        <template #headerCell="{ column }">
          <template v-if="column.key === 'name'">
            <span>
              <smile-outlined />
              {{ column.name }}
            </span>
          </template>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'name'">
            <a>
              {{ record.name }}
            </a>
          </template>
          <template v-else-if="column.key === 'action'">
            <span>
              <a-button type="link">编辑</a-button>
              <a-button type="link" danger>删除</a-button>
            </span>
          </template>
        </template>
      </a-table>
      <!-- 表格 -->
      <!-- 抽屉 -->
      <a-drawer v-model:open="open" class="custom-class" root-class-name="root-class-name" :root-style="{ color: 'blue' }"
        title="添加合集" placement="right" @after-open-change="afterOpenChange">
        <template #extra>
          <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
          <a-button type="primary" @click="onClose">保存</a-button>
        </template>
        <a-form :model="form" :rules="rules" layout="vertical">
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item label="集合名称" name="name">
                <a-input v-model:value="form.name" placeholder="请输入集合名称" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="提示" name="type">
                <a-input v-model:value="form.url" placeholder="请输入集合类型" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="选择楼宇" name="loyu">
                <a-tree v-model:expandedKeys="expandedKeys" v-model:selectedKeys="selectedKeys"
                  v-model:checkedKeys="checkedKeys" checkable :tree-data="treeData">
                  <template #title="{ title, key }">
                    <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
                    <template v-else>{{ title }}</template>
                  </template>
                </a-tree>
              </a-form-item>
            </a-col>

          </a-row>

        </a-form>

      </a-drawer>
      <!-- 抽屉 -->
    </a-card>

  </div>
</template>
<script setup>
import { h, ref, reactive, watch } from 'vue';
import { PlusOutlined, UserOutlined } from '@ant-design/icons-vue';
const pagination = {
  showLessItems: true,
  showQuickJumper: true,
  showSizeChanger: true,
}
const columns = [
  {
    name: '集合名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '楼宇集合',
    dataIndex: 'age',
    key: 'age',
  },

  {
    title: '操作',
    key: 'action',
  },
];
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
  },
];

//抽屉的内容
const open = ref(false);
const afterOpenChange = bool => {
  console.log('open', bool);
};
const showDrawer = () => {
  open.value = true;
};

//抽屉的内容


//抽屉表格内容
//==表单
const form = reactive({
  name: '',
  type: '',
});

//==验证规则
const rules = {
  name: [
    {
      required: true,
      message: 'Please enter user name',
    },
  ],
  type: [
    {
      required: true,
      message: 'please enter type',
    },
  ],

};

//抽屉表单问号图标

//抽屉表格内容

//==树形控件部分
const treeData = [
  {
    title: 'parent 1',
    key: '0-0',
    children: [
      {
        title: 'parent 1-0',
        key: '0-0-0',
        disabled: true,
        children: [
          {
            title: 'leaf',
            key: '0-0-0-0',
            disableCheckbox: true,
          },
          {
            title: 'leaf',
            key: '0-0-0-1',
          },
        ],
      },
      {
        title: 'parent 1-1',
        key: '0-0-1',
        children: [
          {
            key: '0-0-1-0',
            title: 'sss',
          },
        ],
      },
    ],
  },
];
const expandedKeys = ref(['0-0-0', '0-0-1']);
const selectedKeys = ref(['0-0-0', '0-0-1']);
const checkedKeys = ref(['0-0-0', '0-0-1']);
watch(expandedKeys, () => {
  console.log('expandedKeys', expandedKeys);
});
watch(selectedKeys, () => {
  console.log('selectedKeys', selectedKeys);
});
watch(checkedKeys, () => {
  console.log('checkedKeys', checkedKeys);
});

</script>